<template>
  <div class="lee-apps-card">
    <div
      class="lee-apps-card-itemAdd"
      :class="{ 'knowledge-class': type === 'knowledge' }"
    >
      <div class="lee-apps-card-item-title">{{ cardAddBtn.name }}</div>
      <div class="lee-apps-card-item-options">
        <div
          class="lee-apps-card-item-option"
          v-for="(option, idx) in cardAddBtn.options"
          :key="idx"
        >
          <span class="iconfont" :class="option.icon"></span>
          <span>{{ option.name }}</span>
        </div>
      </div>
      <div class="lee-apps-card-item-footer">
        <div class="">
          <span
            class="iconfont"
            :class="cardAddBtn.options[cardAddBtn.options.length - 1].icon"
          ></span>
          <span>{{
            cardAddBtn.options[cardAddBtn.options.length - 1].name
          }}</span>
        </div>
      </div>
    </div>
    <div
      class="lee-apps-card-item"
      v-for="(card, idx) in cardList"
      :key="idx"
      @click="clickApps(card)"
    >
      <div class="lee-apps-card-item-header">
        <div class="img">
          <img src="@/assets/images/AI_author.jpg" alt="" />
        </div>
        <div class="info">
          <div class="name">{{ card.title }}</div>
          <div class="info-sm" v-if="card.files && card.files > 0">
            <span class="lee-color-blue-1">{{ card.files }}</span> 份文件
          </div>
          <div class="info-sm" v-else>{{ card.author }}</div>
        </div>
      </div>
      <div class="description">{{ card.description }}</div>
      <div class="lee-apps-card-item-footer">
        <div class="createtime">
          <span class="iconfont iconrili-cuxiantiao-fill"></span>
          <span>{{ card.createtime }}</span>
        </div>
        <div class="author">{{ card.author }}</div>
      </div>
    </div>
    <div
      v-if="cardList.length <= 0"
      class="lee-apps-card-item-empty"
      v-for="empty in 19"
    >
      <div class="lee-apps-card-item-empty-text" v-show="empty === 12">
        暂无数据
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { goRouter } from "@/utils";
import { useLayoutStore } from "@/store";
import { Menus, NormalMenuInfo } from "@/types/menu";

// 接收props
const props = defineProps<{
  type: string; // 类型标识 studio（工作室）/knowledge（知识库）
  cardAddBtn: {
    name: string;
    type: string;
    options: {
      icon: string;
      name: string;
      fn: () => void;
    }[];
  };
  cardList: NormalMenuInfo[];
}>();
// 转换为响应式数据
const cardList = ref(props.cardList);
const cardAddBtn = reactive(props.cardAddBtn);
// const cardAddBtn = reactive({
//   name: "创建应用",
//   type: "option",
//   options: [
//     {
//       icon: "iconaddCircle",
//       name: "创建空白应用",
//       fn: () => {},
//     },
//     {
//       icon: "iconfankui1",
//       name: "从应用模版创建",
//       fn: () => {},
//     },
//     {
//       icon: "icondanganheji",
//       name: "导入DSL文件",
//       fn: () => {},
//     },
//   ],
// });
// const cardList = ref([
//   {
//     name: "智能客服助手",
//     author: "小李同学",
//     description:
//       "基于大语言模型的智能客服系统，支持多轮对话、上下文理解、情感分析等功能。",
//     createtime: "2025-10-31",
//   },
//   {
//     name: "智能客服助手",
//     author: "小李同学",
//     description:
//       "基于大语言模型的智能客服系统，支持多轮对话、上下文理解、情感分析等功能。",
//     createtime: "2025-10-31",
//   },
//   {
//     name: "智能客服助手",
//     author: "小李同学",
//     description:
//       "基于大语言模型的智能客服系统，支持多轮对话、上下文理解、情感分析等功能。",
//     createtime: "2025-10-31",
//   },
//   {
//     name: "智能客服助手",
//     author: "小李同学",
//     description:
//       "基于大语言模型的智能客服系统，支持多轮对话、上下文理解、情感分析等功能。",
//     createtime: "2025-10-31",
//   },
//   {
//     name: "智能客服助手",
//     author: "小李同学",
//     description:
//       "基于大语言模型的智能客服系统，支持多轮对话、上下文理解、情感分析等功能。",
//     createtime: "2025-10-31",
//   },
//   {
//     name: "智能客服助手",
//     author: "小李同学",
//     description:
//       "基于大语言模型的智能客服系统，支持多轮对话、上下文理解、情感分析等功能。",
//     createtime: "2025-10-31",
//   },
//   {
//     name: "智能客服助手",
//     author: "小李同学",
//     description:
//       "基于大语言模型的智能客服系统，支持多轮对话、上下文理解、情感分析等功能。",
//     createtime: "2025-10-31",
//   },
// ]);
const clickApps = (card: any) => {
  // 准备进入二级菜单
  // let routePath = "/studioApps/workflow"; // 测试路由地址
  if (!card.route) {
    return;
  }
  // 存储二级菜单apps的数据信息
  try {
    useLayoutStore().setNormalMenuInfo(card);
    goRouter(card.route);
  } catch (error) {
    console.error("跳转路由错误", error);
  }
  // 调用全局状态库修改状态
  // 使用store修改状态，借助路由守卫实现监听响应
};
onMounted(() => {});
</script>

<style lang="scss" scoped>
@use "@/assets/css/lee.scss" as lee;
.card-item {
  border-radius: 12px;
  height: 160px;
  background-color: #fff;
  grid-column: span 1 / span 1;
  padding: 8px;
  color: lee.$color-font-black-4;
  box-sizing: border-box;
  position: relative;
  margin: 10px;
  transition: all 300ms ease-in-out;
  z-index: 9;
}
.lee-apps-card {
  display: grid;
  position: relative;
  //   gap: 1rem;
  .lee-apps-card-item {
    @extend .card-item;
    &:hover {
      box-shadow: 0 7px 7px 1px lee.$color-shadow-gray;
      transform: translateY(-2px);
    }

    .lee-apps-card-item-header {
      display: flex;
      height: 40px;
      padding: 14px 14px 12px;
      cursor: pointer;

      .img {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        margin-right: 10px;
        img {
          height: 100%;
          width: 100%;
        }
      }
      .info {
        display: flex;
        flex-direction: column;

        .name {
          width: 100%;
          color: lee.$color-font-black-2;
          font-size: 14px;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        .info-sm {
          color: lee.$color-font-black-4;
          font-size: 10px;
          font-weight: 500;
        }
      }
    }

    .description {
      width: 100%;
      color: lee.$color-font-black-4;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      color: lee.$color-font-black-4;
      cursor: pointer;
      padding: 0 14px;
      box-sizing: border-box;
    }
    .lee-apps-card-item-footer {
      position: absolute;
      bottom: 0px;
      left: 0px;
      right: 0px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid lee.$color-border;
      padding: 4px 14px 6px 14px;
      height: 42px;
      box-sizing: border-box;
      cursor: pointer;
      .createtime {
        font-size: 12px;
        color: lee.$color-font-black-4;
        display: flex;
        align-items: center;

        .iconfont {
          font-size: 12px;
          margin-right: 8px;
        }
      }
      .author {
        font-size: 12px;
        color: lee.$color-font-black-4;
      }
    }
  }
  .lee-apps-card-itemAdd {
    @extend .card-item;
    position: relative;

    .lee-apps-card-item-title {
      padding: 8px 24px 4px 24px;
      font-size: 12px;
      font-weight: 500;
    }
    .lee-apps-card-item-options {
      display: flex;
      flex-direction: column;

      .lee-apps-card-item-option {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
        padding: 7px 24px;
        font-size: 13px;
        font-weight: 500;
        color: lee.$color-font-black-4;

        &:hover {
          border-radius: lee.$size-border-radius-8;
          background-color: lee.$color-background-gray-1-hover;
        }
        .iconfont {
          font-size: 16px;
          margin-right: 8px;
        }
      }
    }
    .lee-apps-card-item-footer {
      position: absolute;
      bottom: 0px;
      left: 0px;
      right: 0px;
      border-top: 1px solid lee.$color-border;
      display: none;
      height: 42px;
      div {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
        padding: 7px 24px;
        font-size: 13px;
        font-weight: 500;
        color: lee.$color-font-black-4;
        margin: 4px 8px;
        &:hover {
          border-radius: lee.$size-border-radius-8;
          background-color: lee.$color-background-gray-1-hover;
        }
        .iconfont {
          font-size: 16px;
          margin-right: 8px;
        }
      }
    }
  }

  .knowledge-class {
    background-color: lee.$color-background-gray-2 !important;

    .lee-apps-card-item-option-black {
      @extend .lee-apps-card-item-option;
      &:hover {
        background-color: lee.$color-background-white-1;
      }
    }
    .lee-apps-card-item-options {
      .lee-apps-card-item-option {
        &:hover {
          background-color: lee.$color-background-white-1 !important;
        }
      }
    }
    .lee-apps-card-item-footer {
      display: block;
      div {
        &:hover {
          background-color: lee.$color-background-white-1 !important;
        }
      }
    }
  }
  .lee-apps-card-item-empty {
    @extend .card-item;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff53;
  }
}
@media (min-width: 1536px) {
  .lee-apps-card {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
</style>
